﻿<!DOCTYPE HTML>
<html class="main_bg2">
<head>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>网站后台 - TL管理系统</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}"/>
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='lib/layui/layui.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='js/public_js.js') }}"></script>
</head>
<body>
<div class="main main_bg1">
    <div class="k1">
        <div class="login r">
            <ul class="hd">
                <li class="on">网站后台登录</li>
                <li class="">扫码快捷登录</li>
            </ul>
            <ul>
                <li>
                    <form data-id="1">
                        <input type="text" class="tex" placeholder="登录名" name="username"/>
                        <input type="password" class="tex tex2" placeholder="密码" name="password"/>
                        <input type="text" class="tex verifyCode" placeholder="验证码" name="verifyCode" maxlength="5" onkeyup="value=value.replace(/[\W]/g,'')"/>
                        <img src="data:image/jpg;base64," id="verify_code">
                        <a class="but" href="javascript:;"
                           onclick="submit_post('{{ url_for('sys_bp.base_frame') }}')">登 录</a>
                    </form>
                </li>
                <li class="layui-hide" id="code_2">
                    <img src="{{ url_for('static',filename="images/qq_loading.gif") }}"
                         alt="QQ扫码登录">
                    <div>请使用管理员QQ扫码登录</div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="copyright">TL-CMS © Copyright 2019 www.tlcms.net 版权所有
<span>作者QQ: 1368419640</span>
</div>
<script>
    $(function () {
        get_vCode();
        var verify_code = $('#verify_code');
        verify_code.click(function () {
            get_vCode()
        });
        var ul_1_ele = $('.login>ul:eq(1)');
        var ul_0_ele = $('.login>ul:eq(0)');
        ul_0_ele.find('li:eq(0)').click(function () {
            $('form').attr('data-id', '1');
            get_vCode();
            ul_0_ele.find('li:eq(1)').removeClass('on');
            $(this).attr('class', 'on');
            ul_1_ele.find('li:eq(1)').attr('class', 'layui-hide'); // 隐藏
            ul_1_ele.find('li:eq(0)').attr('class', 'layui-show'); // 显示
        });
        ul_0_ele.find('li:eq(1)').click(function () {
            $('form').attr('data-id', '2');
            get_QRcode();
            ul_0_ele.find('li:eq(0)').removeClass('on');
            $(this).attr('class', 'on');
            ul_1_ele.find('li:eq(0)').attr('class', 'layui-hide'); // 隐藏
            ul_1_ele.find('li:eq(1)').attr('class', 'layui-show');// 显示
            var timer = setInterval(function () {
                verify_user(timer)
            }, 2000);
        });
        $('#code_2>img').click(function () {
            get_QRcode()
        })
    });

    function get_vCode() {
        $.get('{{ url_for("sys_bp.createVerify",width=167,height=42) }}', function (data) {
            $('#verify_code').attr('src', 'data:image/jpg;base64,' + data.imgCode)
        })
    }

    function get_QRcode() {
        $.get('{{ url_for("sys_bp.qqCode") }}', function (data) {
            $('#code_2>img').attr('src', data.data)
        }, 'json')
    }

    function verify_user(timer) {
        var data = $('form').attr('data-id');
        if (data === '2') {
            $.get('{{ url_for("sys_bp.verify_user") }}', function (data) {
                if (data.status === 1) {
                    get_QRcode()// 重新生成二维码
                } else if (data.status === 3) {
                    layer.msg('请前往QQ，确认登录！', {time: 4000});//二维码认证中
                } else if (data.status === 4) {
                    layer.msg(data.msg, {icon: 2, time: 3000});
                    clearInterval(timer);
                } else if (data.status === 0) {
                    layer.load();
                    setTimeout(function () {
                        layer.closeAll('loading');
                    }, 2000);
                    setTimeout(function () {
                        window.location.href = data.location;
                        clearInterval(timer);
                    }, 2000);
                }
            }, 'json')
        } else {
            clearInterval(timer);
        }

    }
</script>
</body>
</html>